<template>
    <el-form-item
        :label="item.label && !item.question ? item.label : ''"
        :prop="item.prop"
    >
        <span slot="label" v-if="item.question">
            <el-tooltip :content="item.question" placement="top">
                <i class="el-icon-question"></i>
            </el-tooltip>
            {{ item.label }}
        </span>
        <el-radio-group
            v-model="formData[item.prop]"
            :disabled="item.disabled"
            :size="item.size | setSize(item.size)"
            :text-color="item.textColor"
            :fill="item.fill"
            :class="item.class"
            @input="onRadioChange"
        >
            <template v-if="!item.type || item.type === 'default'">
                <el-radio
                    v-for="option in item.options"
                    :key="option.label"
                    :label="option.value"
                    :disabled="option.disabled"
                    :border="item.border"
                    >{{ option.name || option.label }}</el-radio
                >
            </template>
            <template v-else-if="item.type === 'button'">
                <el-radio-button
                    v-for="option in item.options"
                    :key="option.label"
                    :label="option.value"
                    :disabled="option.disabled"
                    >{{ option.name || option.label }}</el-radio-button
                >
            </template>
        </el-radio-group>
    </el-form-item>
</template>
<script>
import mixin from '../mixins/index.js'
export default {
    name: 'df-radio',
    mixins: [mixin],
    props: {
        item: {
            type: Object,
            default() {
                return {
                    /**
                     * 单选按钮类型
                     * @type String
                     * @value 空\default\button
                     */
                    type: '',
                    /**
                     * 单选框是否带有边框
                     * @type Boolean
                     * @value true/false
                     */
                    border: false,
                    /**
                     * 单选框组是否禁用
                     * @type Bolean
                     * @value false/true
                     */
                    disabled: false,
                    /**
                     * 单选框组尺寸 仅对按钮形式的 Radio 或带有边框的 Radio 有效
                     * @type String
                     * @value medium / small / mini
                     * @format 当type === button 或 border === true 时添加此配置
                     */
                    size: 'medium',
                    /**
                     * 按钮形式的 Radio 激活时的文本颜色
                     * @type String
                     * @value '#ffffff'
                     * @format 当type == button 时添加此配置
                     */
                    textColor: 'fff',
                    /**
                     * 按钮形式的 Radio 激活时的填充色和边框色
                     * @type String
                     * @value '#409EFF'
                     */
                    fill: '#409EFF',
                    /**
                     * 单选项数组
                     * @type Arrray
                     * @value []
                     */
                    options: [
                        {
                            /**
                             * Radio 的 value
                             * @type String/Number
                             */
                            label: '',
                            /**
                             * Radio 是否禁用
                             * @type Boolean
                             */
                            disabled: false,
                            /**
                             * Radio 的 name (如果和value一致， 可以不配置)
                             * @type String/Number
                             */
                            name: ''
                        }
                    ],

                    /**
                     * 自定义单选框组类名
                     * @type string
                     * @value 'red'
                     */
                    class: '',
                    /**
                     * 输入框关联的label文字
                     * @type String
                     * @value ''
                     */
                    label: ''
                }
            }
        },
        /**
         * 提交的表单项
         * @type Object
         */
        formData: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    methods: {
        /**
         * 单选框组选中值发生变化时触发
         * @param 选中的 Radio的 label 值
         */
        onRadioChange(data) {
            this.dispatch('baseForm', 'onRadioChange', {
                data: data,
                prop: this.item.prop
            })
        }
    }
}
</script>

<style lang="scss"></style>
